<template>
  <!-- 侧边布局 -->
  <SideMenuLayout
    v-if="pageLayout == 'sidemenu'"
    @showSettingDrawer="showSettingDrawer"
  ></SideMenuLayout>
  <!-- 顶部布局 -->
  <TopMenuLayout
    v-if="pageLayout == 'topmenu'"
    @showSettingDrawer="showSettingDrawer"
  ></TopMenuLayout>
  <!-- 系统设置抽屉 -->
  <a-drawer
    title="系统设置"
    placement="right"
    width="350"
    :closable="true"
    v-model:visible="settingDrawerVisible"
  >
    <a-card title="整体风格" style="width: 100%">
      <a-radio-group
        v-model:value="tStyle"
        :defaultValue="themeStyle"
        @change="themeStyleChange"
      >
        <a-radio value="1">
          <div class="theme-style">
            <span></span>
          </div>
        </a-radio>
        <a-radio value="2">
          <div class="theme-style theme-style-dark">
            <span></span>
          </div>
        </a-radio>
      </a-radio-group>
    </a-card>
    <a-card title="导航模式" style="width: 100%">
      <a-radio-group
        v-model:value="layout"
        :defaultValue="pageLayout"
        @change="layoutChange"
      >
        <a-radio value="sidemenu">
          <div class="theme-style theme-style-dark">
            <span></span>
          </div>
        </a-radio>
        <a-radio value="topmenu">
          <div class="theme-style theme-style-dark theme-style-top">
            <span></span>
          </div>
        </a-radio>
      </a-radio-group>
    </a-card>
    <a-card title="主题颜色" style="width: 100%">
      <p>预设颜色</p>
      <a-row class="ysrow">
        <a-col :span="3" class="yscol">
          <div
            class="ysitem"
            style="background: #1890ff"
            @click="setTColor('#1890ff')"
          ></div>
        </a-col>
        <a-col :span="3" class="yscol">
          <div
            class="ysitem"
            style="background: #e23c39"
            @click="setTColor('#e23c39')"
          ></div>
        </a-col>
        <a-col :span="3" class="yscol">
          <div
            class="ysitem"
            style="background: #e96033"
            @click="setTColor('#e96033')"
          ></div>
        </a-col>
        <a-col :span="3" class="yscol">
          <div
            class="ysitem"
            style="background: #f0af41"
            @click="setTColor('#f0af41')"
          ></div>
        </a-col>
        <a-col :span="3" class="yscol">
          <div
            class="ysitem"
            style="background: #58bfc1"
            @click="setTColor('#58bfc1')"
          ></div>
        </a-col>
        <a-col :span="3" class="yscol">
          <div
            class="ysitem"
            style="background: #72c140"
            @click="setTColor('#72c140')"
          ></div>
        </a-col>
        <a-col :span="3" class="yscol">
          <div
            class="ysitem"
            style="background: #3258e3"
            @click="setTColor('#3258e3')"
          ></div>
        </a-col>
        <a-col :span="3" class="yscol">
          <div
            class="ysitem"
            style="background: #6839c9"
            @click="setTColor('#6839c9')"
          ></div>
        </a-col>
      </a-row>
      <p>自定义颜色</p>
      <a-input
        type="color"
        style="width: 100%"
        v-model:value="tColor"
        @change="theamColorChange"
      ></a-input>
    </a-card>
  </a-drawer>
</template>

<script>
  import { getUserinfo } from '@/api/user'
  import { SmileOutlined } from '@ant-design/icons-vue'
  import { notification } from '@/utils/message'
  import { h } from 'vue'
  import { mapGetters, mapMutations } from 'vuex'
  import SideMenuLayout from './SideMenuLayout'
  import TopMenuLayout from './TopMenuLayout'
  export default {
    name: 'Layout', // 模块描述
    components: { SideMenuLayout, TopMenuLayout },
    props: {},
    data() {
      return {
        settingDrawerVisible: false,
        layout: 'sidemenu',
        tColor: '#1890ff',
        tStyle: '1',
      }
    },
    // 计算属性
    computed: {
      ...mapGetters({
        username: 'user/username',
        accessToken: 'user/accessToken',
        themeStyle: 'user/themeStyle',
        pageLayout: 'user/pageLayout',
        themeColor: 'user/themeColor',
      }),
    },
    async created() {
      this.layout = this.pageLayout
      this.tColor = this.themeColor
      this.tStyle = this.themeStyle
      const { userInfo } = await getUserinfo(this.accessToken)
      this.setUserName(userInfo.name)
      const hour = new Date().getHours()
      const thisTime =
        hour < 8
          ? '早上好'
          : hour <= 11
          ? '上午好'
          : hour <= 13
          ? '中午好'
          : hour < 18
          ? '下午好'
          : '晚上好'
      notification(
        `${this.username},欢迎登录`,
        `${thisTime}！`,
        h(SmileOutlined, { style: 'color: #108ee9' })
      )
      this.theamColorChange()
    },
    methods: {
      ...mapMutations({
        setPageLayout: 'user/setPageLayout',
        setThemeStyle: 'user/setThemeStyle',
        setThemeColor: 'user/setThemeColor',
        setUserName: 'user/setUserName',
      }),
      // 显示系统设置抽屉
      showSettingDrawer() {
        this.settingDrawerVisible = true
      },
      // 主题风格改变
      themeStyleChange() {
        this.setThemeStyle(this.tStyle)
      },
      // 布局改变
      layoutChange() {
        this.setPageLayout(this.layout)
      },
      //设置主题颜色
      setTColor(tColor) {
        this.tColor = tColor
        this.theamColorChange()
      },
      theamColorChange() {
        if (!this.tColor) {
          return
        }
        window.less
          .modifyVars({
            '@primary-color': this.tColor,
            '@link-color': this.tColor,
          })
          .then(() => {
            this.setThemeColor(this.tColor)
          })
          .catch((error) => {
            console.log(error)
          })
      },
    },
  }
</script>

<style lang="less" scoped>
  .ysrow {
    margin-bottom: 14px;
    .yscol {
      .ysitem {
        width: 20px;
        height: 20px;
        border-radius: 3px;
        margin-right: 5px;
        cursor: pointer;
      }
    }
  }
  .theme-style {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 44px;
    height: 36px;
    margin-right: 16px;
    overflow: hidden;
    background-color: #f0f2f5;
    border-radius: 4px;
    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
    cursor: pointer;
    ::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 33%;
      height: 100%;
      background-color: #fff;
      content: '';
    }
    ::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 25%;
      background-color: #fff;
      content: '';
    }
  }
  .theme-style-dark ::before {
    background-color: #000;
  }
  .theme-style-top ::before {
    width: 100%;
    height: 25%;
  }
</style>
